<template>
    <div class="tabWrap" :style="{backgroundColor}">
      <div
        v-for="(item, index) in tabList"
        :key="index"
        @click="tabClick(item)"
        class="tabItem"
      >
        <text class="tabItem-text" :class="[theme==='dark'?'tabDarkItem':'tabWhiteItem',getActiveClass(index)]">{{ item.name }}</text>
      </div>

    </div>
</template>

<script>
import { swiperPages, HOME_PAGE_INDEX } from '@/common/constant'
import { DataManager } from '@/base-core'
export default {
  name: "HeaderTab",
  props: {
    activeIndex: {
      type: Number,
      default: 0
    },
    backgroundColor: {
      type: String,
      default: '#f5f5f5'
    },
    theme:{
      type: String,
      default: 'dark'
    }
  },
  watch: {
	'activeIndex':{
		handler(newV, oldV){
		  DataManager.setValue(HOME_PAGE_INDEX, newV)
		},
		immediate: true
	}  
  },
  data() {
    return {
      tabList: swiperPages,
    }
  },
  methods:{
	  getActiveClass(index){
		const { activeIndex, theme } = this
		if(activeIndex===index){
			if(theme==='dark'){
				return 'itemDarkActive'
			}
			if(theme==='white'){
				return 'itemWhiteActive'
			}
		}
	  },
	  tabClick(item){
		  uni.navigateTo({
		  	url: item.path,
			animationDuration:500,
			animationType:'fade-in'
		  })
	  }
  }
}
</script>

<style lang="scss" scoped>
.tabWrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
    padding: 80upx 90upx 10upx;
  /* #ifndef APP-PLUS */
    padding: 20upx ;
  /* #endif */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999999;   
  background-color: red;
}

.tabItem{
  font-size: 38upx;
}
.tabItem-text{
  color:#666;
  font-weight: 800;
   /*  #ifdef  APP-PLUS */
   font-size: 36upx;
 /*  #endif  */
}
.tabDarkItem{
  color: #999;
}
.tabWhiteItem{
  color: #666;
}
.itemDarkActive{
  color:#fff;
  font-weight: 800;
}
.itemWhiteActive{
  color:#333;
  font-weight: 800;
}
</style>